<template>
    <div class="assets">
        <!-- 头部饼图 -->
        <div class="headerBox">
            <div v-for="(item, index) in list" :key="index" class="headerBoxItem">
                <div>{{item.name}}</div>
                <div :id="'echarts'+index"></div>
            </div>
        </div>
        <!-- 资产分类统计 -->
        <div class="onePart">
            <div id="echartsOfClass"></div>
            <div class="shouwMoare">
                <el-button class="morebtn" :disabled="myform.disabled1" @click="myform.page1++;getCateCountFn()">查看更多</el-button>
            </div>
        </div>
        <!-- 部门占用资产统计 -->
        <div class="onePart">
            <div id="echartsOfDept"></div>
            <div class="shouwMoare">
                <el-button class="morebtn" :disabled="myform.disabled2" @click="myform.page2++;getDeptCountFn()">查看更多</el-button>
            </div>
        </div>
        <!-- 个人占用资产统计 -->
        <div class="onePart">
            <div id="echartsOfUser"></div>
            <div class="shouwMoare">
                <div>个人领用资产价值前30名</div>
                <el-button class="morebtn" :disabled="myform.disabled3" @click="myform.page3++;getUserCountFn()">查看更多</el-button>
            </div>
        </div>
            <!-- 部门维修统计 -->
        <div class="bottomPart">
            <div v-for="item in 4" :key="item">
                <div :id="'echartsOfBtn'+item"></div>
                <div class="shouwMoare">
                    <el-button class="btn" :class="form['month'+item]?'whiteC':'blueC'" @click="getMonth(item,'no')" :disabled="!form['month'+item]">累计</el-button>
                    <!-- <div class="btn">
                        <span :class="form['month'+item]?'whiteC':'blueC'" @click="getMonth(item,'no')">累计</span>
                    </div> -->
                    <el-date-picker :clearable="false" style="width:136px" @change='val=>{getMonth(item,"value",val)}' format="yyyy-MM"  v-model="form['month'+item]"  value-format='yyyy-MM' type="month"  placeholder="选择月"></el-date-picker>
                   
                   <el-button  class="morebtn" :disabled="form['disabled'+item]"  @click="form['page'+item]++;getMonth(item)"> 查看更多</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
/* eslint-disable */
import moment from 'moment' 
import {getReportform,getCateCount,getDeptCount,getUserCount,getDeptRepairCount,getUserRepairCount,getDeptLossCount,getUserLossCount} from '../api'
export default {
    name:"assets",
    props:['whId'],
    data(){
        return {
            wh_id:'',
            form:{
                month1:new Date(),
                month2:new Date(),
                month3:new Date(),
                month4:new Date(),
                
                page1:1,
                data1:[],
                disabled1:false,
                page2:1,
                data2:[],
                disabled2:false,
                page3:1,
                data3:[],
                disabled3:false,
                page4:1,
                data4:[],
                disabled4:false,
            },
            myform:{
                disabled1:false,
                page1:1,
                data1:[],
                disabled2:false,
                page2:1,
                data2:[],
                disabled3:false,
                page3:1,
                data3:[],
            },
            list:[]
        }
    },
    mounted(){
        this.getData(this.whId)
    },
    methods:{
        /**头部bin */
        getReportformFn(){
            getReportform({wh_id:this.wh_id}).then(res=>{
                this.list = res
                res&&res.length?res.forEach((element,index) => {
                    this.setBin(index,element)
                }):''
            })
        },
        /**个人占用资产 */
        getUserCountFn(){
            getUserCount({wh_id:this.wh_id,page:this.myform.page3}).then(res=>{
                let obj = {
                    label:'个人占用资产统计',
                    name:['领用数量','资产价值'],
                    xAxisName:'re_user_name',
                    right:312
                }
                this.myform.disabled3 = Number(res.current_page)>=Number(res.last_page) 
                if(this.myform.page3==1){
                    this.myform.data3 = res.data
                }else{
                    this.myform.data3 = [...res.data,...this.myform.data3]
                }
                this.setBar('echartsOfUser',this.myform.data3,obj)
            })
        },
        /**部门占用 */
        getDeptCountFn(){
            getDeptCount({wh_id:this.wh_id,page:this.myform.page2}).then(res=>{
                let obj = {
                    label:'部门占用资产统计',
                    name:['资产数量','资产价值'],
                    xAxisName:'name',
                   
                }
                this.myform.disabled2 = Number(res.current_page)>=Number(res.last_page) 
                if(this.myform.page2==1){
                    this.myform.data2 = res.data
                }else{
                    this.myform.data2 = [...res.data,...this.myform.data2]
                }
                this.setBar('echartsOfDept',this.myform.data2,obj)
            })
        },
        /**资产分类 */
        getCateCountFn(){
            getCateCount({wh_id:this.wh_id,page:this.myform.page1}).then(res=>{
                let obj = {
                    label:'资产分类统计',
                    name:['资产数量','资产价值'],
                    xAxisName:'category_name',
                }
                this.myform.disabled1 = Number(res.current_page)>=Number(res.last_page) 
                if(this.myform.page1==1){
                    this.myform.data1 = res.data
                }else{
                    this.myform.data1 = [...res.data,...this.myform.data1]
                }
                this.setBar('echartsOfClass',this.myform.data1,obj)
                log(res)
            })
        },
        /*底下四个 */
        getMonth(index,label){
            if(label=='now'){
                this.form['month'+index] = new Date()
            }
            if(label=='no'){
                this.form['month'+index] = ''
                this.form['page'+index] = 1
            }
            let promise
            switch(index){
                case 1: promise = getDeptRepairCount({wh_id:this.wh_id,month:label=='no'?'':moment(this.form.month1).format('YYYY-MM'),page:this.form.page1}); break;
                case 2: promise = getUserRepairCount({wh_id:this.wh_id,month:label=='no'?'':moment(this.form.month2).format('YYYY-MM'),page:this.form.page2}); break;
                case 3: promise = getDeptLossCount({wh_id:this.wh_id,month:label=='no'?'':moment(this.form.month3).format('YYYY-MM'),page:this.form.page3}); break;
                case 4: promise = getUserLossCount({wh_id:this.wh_id,month:label=='no'?'':moment(this.form.month4).format('YYYY-MM'),page:this.form.page4});break;
            }
            promise.then(res=>{
                let obj = {
                    label:['维修数据统计 - 部门资产','维修数据统计 - 个人资产','遗失资产统计 - 部门资产','遗失资产统计 - 个人资产'][index-1],
                    subtext:['按维修费用多少排名','按维修费用多少排名','按遗失资产价值排名','按遗失资产价值排名',][index-1],
                    name:index>2?['遗失资产件数','遗失资产价值']:['报修次数','遗失资产价值'],
                    top:35,
                    right:55,
                    bottom:60,
                    xAxisName:['name','re_user_name','name','re_user_name',][index-1],
                }
                if(this.form['page'+index]==1){
                    this.form['data'+index] = res.data
                }else{
                    this.form['data'+index] = [...this.form['data'+index],...res.data]
                }
                this.form['disabled'+index] = Number(res.current_page)>=Number(res.last_page) 
                // log(this.form['disabled'+index],index)
                this.setBar('echartsOfBtn'+index,this.form['data'+index],obj,2)
            })
            
        },
        /**设置柱状图 */
        setBar(obj,data,subfix,maxwidth){
           log(obj,data,subfix)
           let maxSpan = Math.floor((window.innerWidth-320)/40/(maxwidth||1))
           let option = {
               dataZoom: {
                    show:data.length>maxSpan, // 为true 滚动条出现
                    realtime: true,  
                    type:'slider', // 有type这个属性，滚动条在最下面，也可以不行，写y：36，这表示距离顶端36px，一般就是在图上面。
                    height: 20, // 表示滚动条的高度，也就是粗细
                    maxValueSpan:maxSpan,
                },
               color: ['#00BB7A', '#FF9502',],
                title: {
                    text:subfix.label,
                    left:'37px',
                    subtext:subfix.subtext,
                    subtextStyle:{
                        color: 'rgba(16, 16, 16, 1)',
                        fontSize: 14,
                    },
                    textStyle:{
                        lineHeight: 24,
                        color: 'rgba(16, 16, 16, 1)',
                        fontSize: 16,
                        fontWeight:600,
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        // type: 'shadow'
                        type: ''
                    },
                    formatter:'{a0}: {c0}件<br />{a1}: {c1}元'
                },
                legend: {
                    data:subfix.name,
                    top:subfix.top,
                    right:subfix.right||135,
                    textStyle:{
                        fontSize:14,
                        color:'rgba(70, 70, 70, 1)',
                    },
                },
                grid: {
                    left: '3%',
                    top:'25%',
                    right:'5%',
                    bottom:subfix.bottom||85,
                    show:false,
                    containLabel:false,
                },
                yAxis:[
                    {
                        type: 'value',
                        name: '数量',
                        axisLabel: {
                            formatter: '{value}'
                        },
                        splitLine: { //坐标轴在 grid 区域中的分隔线。
                            show: false
                        },
                        axisTick:{//坐标轴刻度的设置
                            show:false
                        }
                        
                    },
                    {
                        type: 'value',
                        name: '价值',
                        axisLabel: {
                            formatter: '{value}'
                        },
                        splitLine: { //坐标轴在 grid 区域中的分隔线。
                            show: false
                        },
                        axisTick:{//坐标轴刻度的设置
                            show:false
                        }
                    },
                ],
                xAxis : {
                    type: 'category',
                    axisTick: {
                        show: false,
                        interval:0,
                    },
                    axisLabel:{
                        rotate :45,
                    },
                    data: data&&data.length?data.map(item=>{
                        return item[subfix.xAxisName]
                    }):[]
                },
                series: [
                    {
                        name: subfix.name[0],
                        type: 'bar',
                        barWidth:10,
                        barGap: 0,
                        data: data&&data.length?data.map(item=>{
                            return item.count
                        }):[]
                    },
                    {
                        name: subfix.name[1],
                        type: 'bar',
                        barGap: 0,
                        barWidth:10,
                        yAxisIndex: 1,
                        data: data&&data.length?data.map(item=>{
                            return  Number(item.sum)
                        }):[]
                    }
                ]
            };
            this.$nextTick(()=>{
                let echarts = this.$echarts.init(document.getElementById(obj))
                echarts.setOption(option);
            })
        },
        /*获取所有数据 */
        getData(wh_id){
            this.wh_id = wh_id
            this.getReportformFn()
            this.getCateCountFn()
            this.getDeptCountFn()
            this.getUserCountFn()
            this.getMonth(1)
            this.getMonth(2)
            this.getMonth(3)
            this.getMonth(4)
        },
        setBin(index,element){
            
            let arr = ['总数量','总价值','总费用','总数量','总数量',]
            let  option = {
                color:['#FF2D55','#28CC41','#101010','#1890FF'],
                legend: {
                    orient: 'horizontal',
                    icon: 'circle',
                    bottom:0,
                    left: 0,
                    width :'200px',
                    data:element.status&&element.status.length?element.status.map(item=>{
                            return item.status_name
                    }):[]
                },
                series: [
                    {
                        type: 'pie',
                        radius: [50, 60],
                        center: ['50%',96],
                        avoidLabelOverlap: false,
                        label: {
                            show: true,
                            position: 'center',
                            formatter : [
                                    `{a|${arr[index]}}`,
                                    `{b|${element.count}}`
                                ].join('\n'),
                            rich:{
                                a: {
                                    color:'rgba(174, 174, 178, 1)',
                                    lineHeight:30,
                                    fontSize: 14,
                                    fontWeight:400
                                },
                                b: {
                                    color: 'rgba(16, 16, 16, 1)',
                                    fontSize: 20,
                                    fontWeight:600
                                },
                            }
                        },
                        labelLine: {
                            show: false,
                            
                        },
                        data:element.status&&element.status.length?element.status.map(item=>{
                            return {value:item.status,name:item.status_name}
                        }):[]
                    }
                ]
            };
            this.$nextTick(()=>{
                let echarts = this.$echarts.init(document.getElementById('echarts'+index))
                echarts.setOption(option);
            })
        }
    }
}
</script>

<style lang='stylus' scoped>
.assets
    .headerBox 
        display flex 
        flex-wrap wrap
        >div:last-child 
            margin-right 0
        .headerBoxItem
            width: 267px;
            height: 293px;
            border-radius: 4px;
            margin-right 14px
            background-color: rgba(255, 255, 255, 1);
            font-family: Roboto;
            padding 20px 30px 30px 30px
            margin-bottom 10px
            display flex
            flex-direction column
            >div:first-child 
                line-height : 24px;
                color: rgba(16, 16, 16, 1);
                font-size: 16px;
                font-weight 600
                padding-bottom 7px
                border-bottom  1px solid rgba(242, 242, 242, 1);
            >div:last-child 
                flex 1
    .onePart
        height 360px
        width 100%
        position relative
        background-color #fff
        margin-bottom 10px
        >div:first-child 
            height 100%
            width 100%
            padding-top 25px
    .bottomPart
        display flex
        flex-wrap wrap
        >div 
            position relative
            margin-bottom 10px
            width calc(50% - 5px)
            background-color #fff
            height 360px
            padding-top 23px 
            >div:first-child
                height 100%
                width 100%
        >div:nth-of-type(2n)
            margin-left 10px
    .shouwMoare
        position absolute 
        top 20px
        right 34px 
        display flex 
        align-items center
        >div:first-child
            color: rgba(16, 16, 16, 1);
            font-size: 14px;
        .btn 
            margin 0 7px 0 14px
            border-radius: 3px 
            height: 30px;
            width: 60px;
            >span
                font-size: 12px;
        .whiteC 
            color: rgba(0, 0, 0, 0.65);
            background-color: rgba(255, 255, 255, 1);
            border: 1px solid rgba(225, 225, 225, 1);
        .blueC 
            color #fff
            background-color: rgba(77, 134, 255, 1)!important
            border 1px solid ra(255,255,255,0)!important
        .morebtn
            width: 74px;
            padding 0
            line-height : 28px;
            margin-left 22px
            text-align center
            display inline-block
            border-radius: 50px;
            background-color: rgba(255, 255, 255, 0);
            color: rgba(49, 150, 250, 1);
            font-size: 12px;
            border: 1px solid rgba(49, 150, 250, 1);
            >span  
                font-size 12px!important
</style>